<template>
    <view>
        <view class="labels">
            <view class="labname">用户名</view>
            <input class="yzms" v-model="userNum" placeholder-style="color:#ADB0BB" type="text"
                placeholder="输入您的用户名" />
        </view>
        <view class="labels">
            <view class="labname">邀请码</view>
            <input class="yzms" v-model="yaoqingma" placeholder-style="color:#ADB0BB" type="text"
                placeholder="请输入邀请码" />
        </view>
        <view class="labels">
            <view class="labname">登录密码</view>
            <input class="yzms" v-model="loginpsd" placeholder-style="color:#ADB0BB" type="password"
                placeholder="8-12位字母+数字组合" />
        </view>
        <view class="labels">
            <view class="labname">确认密码</view>
            <input class="yzms" v-model="okpsd" placeholder-style="color:#ADB0BB" type="password" placeholder="请再次输入登录密码" />
        </view>
        <view class="lats">
            <checkbox value="cb" :checked="opinSign" @click="checkboxChange" style="transform: scale(0.7);" />
            <text>我已阅读并同意</text>
            <navigator url="../agree/agree">《用户协议》</navigator>
        </view>
        <button class="register" :disabled="!opinSign" @click="regisFn">立即注册</button>
        <view class="botmreg">
            <navigator url="/pages/login/login" open-type="navigate" hover-class="none">
                <text>已有账户，去登录</text>
            </navigator>
        </view>
    </view>
</template>

<script>
    import request from "../../untils/request.js";
    export default {
        data() {
            return {
                opinSign: true,
                userNum: '',
                yaoqingma: '',
                loginpsd: '',
                okpsd: '',
                verifyCode: '',
                //验证规则
                rules: {
                    userNum: {
                        rule: /(^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$)|(^1[3|4|5|6|7|8|9]\d{9}$)/,
                        msg: "手机号或邮箱格式错误",
                    },
                    yaoqingma: {
                        rule: /^[a-z0-9]/,
                        msg: "请输入邀请码",
                    },
                    verifyCode: {
                        rule: /^[0-9]/,
                        msg: "请输入验证码或格式错误",
                    },
                    loginpsd: {
                        rule: /(?![0-9A-Z]+$)(?![0-9a-z]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/,
                        msg: "请输入登录密码或格式错误",
                    },
                    okpsd: {
                        rule: /(?![0-9A-Z]+$)(?![0-9a-z]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/,
                        msg: "请再次输入登录密码",
                    },
                },
                //验证码按钮
                codeBtn: {
                    codeTime: 60,
                    codeText: "获取验证码",
                    codeStatus: true,
                },
            }
        },
        onLoad() {

        },
        onNavigationBarButtonTap: function(e) {
            location.href='https://vvvzhangshuo.oss-cn-shanghai.aliyuncs.com/quantBot/lianghua.apk'
        },
        methods: {
            validate(key) {
                let bool = true;
                if (!this.rules[key].rule.test(this[key])) {
                    //提示信息
                    uni.showToast({
                        icon: "none",
                        title: this.rules[key].msg,
                    });
                    //取反
                    bool = false;
                    return false;
                }
                return bool;
            },
            //协议勾选
            checkboxChange(e) {
                if (this.opinSign) {
                    this.opinSign = false;
                } else {
                    this.opinSign = true;
                }
            },
            //立即注册
            regisFn() {
                if (this.loginpsd != this.okpsd) {
                    return uni.showToast({
                        icon: "none",
                        title: '两次密码不一致',
                    });
                }
                uni.showLoading({
                    mask:true
                });
                request.postLoginris('/user/info/register', {
                    acceptAgreement: 0, //是否接受协议 0 接受 1 不接受 ,
                    inviteCode: this.yaoqingma, //邀请码 ,
                    nickname: this.userNum, //手机号 ,
                    password: this.loginpsd, //登录密码 ,
                    userType: "C", //用户类型 C/B ,
                    //verifyCode: this.verifyCode, //验证码
                }).then(res => {
                    if (res.code == '200') {
                        uni.hideLoading();
                        uni.showToast({
                            icon: "none",
                            title: '注册成功',
                        });
                        setTimeout(function() {
                            uni.navigateTo({
                                url: '/pages/login/login',
                            });
                        }, 1000)
                    } else {
                        uni.hideLoading();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
            //获取验证码
            getPhonecode() {
                //0手机号，1邮箱
                let telEmail = '0';
                if (this.userNum.indexOf('@') == -1) {
                    telEmail = '0';
                } else {
                    telEmail = '1';
                }
                if (this.validate("userNum") && this.codeBtn.codeStatus) {
                    this.codeBtn.codeStatus = false;
                    let timerId = setInterval(() => {
                        let codetime = this.codeBtn.codeTime;
                        codetime--;
                        this.codeBtn.codeTime = codetime;
                        this.codeBtn.codeText = "剩余" + codetime + "秒";
                        if (codetime < 1) {
                            clearInterval(timerId);
                            this.codeBtn.codeText = "重新获取";
                            this.codeBtn.codeTime = 60;
                            this.codeBtn.codeStatus = true;
                        }
                    }, 1000);
                    request.postLoginris('/user/login/sendVerifiyCode', {
                        accountNumber: this.userNum,
                        businessType: '1',
                        accountType: telEmail
                    }).then(res => {
                        console.log(res)
                        if (res.code == "200") {

                            uni.showToast({
                                icon: "none",
                                title: '发送成功',
                            });
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: res.message,
                            });
                        }
                    })
                }
            },
        }
    }
</script>

<style>
    .labels {
        margin: 0 30rpx;
        border-bottom: 1px solid #EBEBEB;
        height: 130rpx;
    }

    .labels .labname {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 600;
        margin: 16px 0 10px 0;
        color: #333333;
    }

    .labels input {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 24px;
    }

    .lats {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 33rpx;
        color: #0f0f0f;
        display: flex;
        align-items: center;
        margin: 40rpx 20rpx 0;
    }

    .lats text {
        color: #bebebe;
        font-size: 24rpx;
    }

    .lats navigator {
        color: #7F6AC3;
    }

    .register {
        margin: 98rpx 116rpx 0;
        width: 260px;
        height: 38px;
        background: #7F6AC3;
        border-radius: 19px;
        line-height: 38px;
        font-size: 14px;
        border: none;
        color: #FFFFFF;
    }

    .botmreg {
        display: flex;
        justify-content: center;
        margin: 20px 0 0 0;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
    }

    .login-phone {
        margin: 0 30rpx;
        border-bottom: 1px solid #EBEBEB;
        height: 120rpx;
        align-items: center;
    }

    .login-phone .lxc {
        display: flex;
        justify-content: space-between;
    }

    .login-phone .lxc input {
        font-size: 14px;
    }

    .phone-code {
        font-size: 14px;
        font-weight: 400;
        line-height: 33rpx;
        color: #7F6AC3;
        margin: 0 10px 0 0;
    }
</style>
